<script setup lang="ts">
import { Delete, EditPen, Bicycle } from '@element-plus/icons-vue'
import { delPostService } from '@/api/post'

const props = defineProps({
  userView: {
    type: Boolean,
    default: false
  },
  post: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      content: '',
      username: '',
      time: ''
    })
  }
})

const emit = defineEmits(['edit', 'delete'])
const postEdit = () => {
  emit('edit', props.post)
}
const deletePost = async () => {
  ElMessageBox.confirm(
    ('确认删除《' + props.post.title + '》吗？'),
    'Warning',
    { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消', center: true })
    .then(async () => {
      const { data } = await delPostService(props.post.id)
      emit('delete')
      ElMessage.success(data.message)
    })
    .catch()
}
</script>
<template>
  <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <el-text class="mx-1" type="primary">{{ post.title }}</el-text>
        <div class="edit-button" v-show="userView">
          <el-button type="primary" circle :icon="EditPen" @click="postEdit" />
          <el-button type="danger" circle :icon="Delete" @click="deletePost" />
        </div>
      </div>
    </template>
    <div>{{ post.content }}</div>
    <template #footer>
      <div class="content">
        <el-text class="mx-1" type="info">{{ post.username }}</el-text>
        <el-text class="mx-1" type="success">{{ post.time }}</el-text>
      </div>
    </template>
  </el-card>
  <el-divider>
    <el-icon>
      <Bicycle />
    </el-icon>
  </el-divider>
</template>

<style lang="scss" scoped>
.el-card {
  min-width: 95%;
  margin-left: auto;
  margin-right: auto;

  .card-header {
    display: flex;
    justify-content: space-between;

    .edit-button {
      .el-button {
        font-size: 16px;
        height: 40px;
        width: 40px;
      }
    }

    .el-text {
      font-size: 24px;
    }

  }

  .content {
    display: flex;
    justify-items: center;
    justify-content: space-between;
  }
}
</style>
